<!DOCTYPE html>
<html xmlns:wb="http://open.weibo.com/wb">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/gh/Sanarous/files@1.13/js/linkcard.js"></script>
  <script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?fc9a8559a133f4d8ce784d69d6337bb0";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

  
  <title>vue前端项目搭建和要点记录 | 涂宗勋的博客</title>
  <meta name="baidu-site-verification" content="o8pWlgAEZ7" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="vue-cli2和vue-cli3（vue-cli4）的一些区别 据我目前的了解，创建vue项目，vue-cli不是必须的，但是在实际开发时，几乎就是必须的。vue-cli既可以看做是一种创建vue项目的快捷工具，也可能理解成是vue的一种规范。由于本机的vue-cli安装较早，还是vue-cli2的版本，而如今早已经是vue-cli4，所以也是时候进行一定的升级了，升级过程以及升级之后的部分区别">
<meta property="og:type" content="article">
<meta property="og:title" content="vue前端项目搭建和要点记录">
<meta property="og:url" content="https://tuzongxun.gitee.io/2020/03/01/tzxblog5/index.html">
<meta property="og:site_name" content="涂宗勋的博客">
<meta property="og:description" content="vue-cli2和vue-cli3（vue-cli4）的一些区别 据我目前的了解，创建vue项目，vue-cli不是必须的，但是在实际开发时，几乎就是必须的。vue-cli既可以看做是一种创建vue项目的快捷工具，也可能理解成是vue的一种规范。由于本机的vue-cli安装较早，还是vue-cli2的版本，而如今早已经是vue-cli4，所以也是时候进行一定的升级了，升级过程以及升级之后的部分区别">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-03-01T06:09:42.000Z">
<meta property="article:modified_time" content="2020-03-14T00:32:41.895Z">
<meta property="article:author" content="涂宗勋">
<meta property="article:tag" content="业余项目">
<meta property="article:tag" content="tzxblog">
<meta name="twitter:card" content="summary">
  
  
    <link rel="icon" href="/images/touxiang.png">
  
  
    
  
  
<link rel="stylesheet" href="/tzxblog/css/style.css">

  

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <script src="https://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/gh/Sanarous/files@1.13/js/linkcard.js"></script>
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    
    <div id="header-inner" class="inner">
      <nav id="sub-nav">
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://tuzongxun.gitee.io"></form>
      </div>
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/tzxblog/">首页</a>
        
          <a class="main-nav-link" href="/tzxblog/shuoshuo/">说说</a>
        
          <a class="main-nav-link" href="/tzxblog/archives/">归档</a>
        
          <a class="main-nav-link" href="/tzxblog/collections/">导航</a>
        
          <a class="main-nav-link" href="/tzxblog/download/">资源</a>
        
          <a class="main-nav-link" href="/tzxblog/about/">简历</a>
        
      </nav>
      
    </div>
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/tzxblog/" id="logo">涂宗勋的博客</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/tzxblog/" id="subtitle">java程序员，现居武汉，CSDN博客https://blog.csdn.net/tuzongxun</a>&nbsp;&nbsp;&nbsp;&nbsp;
		  <!--<span id="busuanzi_container_site_pv">【本站累计访问量:<span id="busuanzi_value_site_pv"></span>】</span>-->
        </h2>
		
      
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-tzxblog5" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/tzxblog/2020/03/01/tzxblog5/" class="article-date">
  <time datetime="2020-03-01T06:09:42.000Z" itemprop="datePublished">2020-03-01</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/tzxblog/categories/%E4%B8%9A%E4%BD%99%E9%A1%B9%E7%9B%AE/">业余项目</a>
  </div>

</span>
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      vue前端项目搭建和要点记录
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <!-- Table of Contents -->
        
        <p>vue-cli2和vue-cli3（vue-cli4）的一些区别</p>
<p>据我目前的了解，创建vue项目，vue-cli不是必须的，但是在实际开发时，几乎就是必须的。vue-cli既可以看做是一种创建vue项目的快捷工具，也可能理解成是vue的一种规范。<br>由于本机的vue-cli安装较早，还是vue-cli2的版本，而如今早已经是vue-cli4，所以也是时候进行一定的升级了，升级过程以及升级之后的部分区别记录如下：</p>
<a id="more"></a>

<p>vue-cli安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">v2：&#96;npm i -g vue-cli&#96;</span><br><span class="line">v3&#x2F;v4：&#96;npm i -g @vue&#x2F;cli&#96;</span><br></pre></td></tr></table></figure>

<p>创建项目</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">v2：&#96;vue init projectName&#96;</span><br><span class="line">v3&#x2F;v4：&#96;vue create projectName&#96;</span><br></pre></td></tr></table></figure>

<p>启动项目</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">v2：&#96;npm run dev&#96;</span><br><span class="line">v3&#x2F;v4：&#96;npm ren serve&#96;</span><br></pre></td></tr></table></figure>

<p>端口修改<br>vue-cli创建的项目，默认端口号是8080，一般正式开发都不会直接使用这个默认端口号，了解java后端开发的就会知道，tomcat的默认端口号也是8080，通常也一样都需要修改一下。<br>在vue-cli2中，端口号修改起来可能相对更简单，直接在项目的config目录下能找到index.js文件，然后修改里边的port属性即可。<br>但是vue-cli3创建的项目整体结构不同，也没有了config目录，他的端口号修改显得比较隐蔽，需要一层层找到如下文件，然后修改里边的端口号：<br>node_modules@vue\cli-service\lib\commands\serve.js</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const defaults &#x3D; &#123;</span><br><span class="line">  host: &#39;0.0.0.0&#39;,</span><br><span class="line">  port: 8080,</span><br><span class="line">  https: false</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>vue的一些基础用法<br>组件安装<br>在我目前的需求中，除开创建项目时选择的router之外，已知需要的就还有axios和vant的组件依赖。对于技术选型，axios用来在vue中进行ajax请求，vant用作ui设计。<br>作为后端为主的前端菜鸟，现在用过的ui技术只有element-ui、bootstrap、vant，有的还只是用了一两下，早就忘到了千里之外，所以这次也是希望可以选择一个主修，最终就锁定在了vant上。<br>组件安装命令如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cnpm i vant -S</span><br><span class="line">cnpm i axios  -S</span><br><span class="line">cnpm i babel-plugin-import -D</span><br></pre></td></tr></table></figure>

<p>上边最后一个的作用是为了vant的组件按需引入，查看vant官网会有说明。<br>额外提一点的就是，安装了cnpm之后，安装起依赖确实比之前的npm快了非常非常多，尤其是如今身在农村之能手机热点联网的情况下。</p>
<p>组件使用<br>组件的安装我理解为就是java里边maven下载jar包，那么和java一样，在使用的地方也需要引入。<br>axiox的引入，是在main.js中：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import axios from &#39;axios&#39;</span><br><span class="line">Vue.prototype.$http&#x3D;axios</span><br></pre></td></tr></table></figure>

<p>就目前的理解，上边的代码，第一行是必要的，第二行不是必须，写法也不一定非要这样，应该是一种习惯。我跟着教程学，也就按照这样写了。</p>
<p>vant的引入，和axios不太一样，不是main.js，而是router目录中index.js下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">import &#123; Tab, Tabs &#125; from &#39;vant&#39;;</span><br><span class="line">import &#123; Sidebar, SidebarItem &#125; from &#39;vant&#39;;</span><br><span class="line">Vue.use(Sidebar);</span><br><span class="line">Vue.use(SidebarItem);</span><br><span class="line">Vue.use(Tab);</span><br><span class="line">Vue.use(Tabs);</span><br></pre></td></tr></table></figure>

<p>这个地方我其实还不是太明白，因为一开始ui组件的引用也放在了main.js中，但是页面却不显示，挪到了index.js中之后就可以正常使用，希望在后续学习和敲代码应用的过程中能进一步弄清楚。</p>
<p>组件（component）和视图（view）的区别<br>在vue-cli3或者vue-cli4中，项目目录有components和views这两个目录，就目前的理解来说，里边的代码用法基本一样。<br>view可能更侧重于整体的页面，而compenent则是零散的局部的一些，从一开始的学习中来说，可以尽量规范的划分，但是也可以都放在一个目录下，并不影响实际的功能。</p>
<p>关于this和_this<br>this是一个关键字，代表的是当前对象，在java中也是有的。<br>而vue中的this，有一个用法可能需要记录，那就是在某些地方使用之前可能需要把this先赋值给另一个变量，比如_this。<br>_this应该是一个普遍的写法，却不是硬性的规定，也可以叫其他的名字。<br>它的出现，是因为在一个视图或者组件中，可能会有非常多的对象，比如点击事件等，这时候很容易分不清当前的this代表的是哪个，从而加大错误率和调试难度。</p>
<p>静态资源<br>不论是真是项目，还是学习时的demo，总是少不了一些静态资源，在vue-cli4中，静态资源需要一般放在public目录下，例如可以在public下创建一个css文件夹存在css样式文件，可以在public下创建一个img文件夹存在图片等资源，也可以创建一个json目录存放模拟数据的json文件。<br>当然了，这些命名都不是必须的，也都可以自定义，只要使用的时候保持一致即可。</p>
<p>使用axios进行http请求<br>http请求有get、post、put等，最长用的是get和post，这里就先以此记录axios的语法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">this.$http.get(url,&#123;params:&#123;paramName:paramValue&#125;&#125;).then(function(res)&#123;</span><br><span class="line">	console.log(res);</span><br><span class="line">&#125;)</span><br><span class="line">this.$http.post(url,&#123;data:&#123;paramName:paramValue&#125;&#125;).then(function(res)&#123;</span><br><span class="line">	console.log(res);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>以上是基础用法，也是单请求的简单示例，但实际上很多时候一个功能的最终结果是需要多个请求处理后才能实现，这就还需要借助spread：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">this.$http.all([this.$http.post(url1),this.$http.get(url2)]).then(</span><br><span class="line">	this.$http.spread((res1,res2)&#x3D;&gt;&#123;</span><br><span class="line">			console.log(res1);</span><br><span class="line">			console.log(res2);</span><br><span class="line">		&#125;</span><br><span class="line">	)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>以上不论是get、post单请求，还是合在一起的复合请求，都用到了<code>$http</code>，可能会有人有疑问。这里实际上是因为上边所说的引入了axios后，加了<code>Vue.prototype.$http=axios</code>这一行，所以这里$http代表的就是axios，也算是一种习惯性写法。</p>
<h1 id="项目地址"><a href="#项目地址" class="headerlink" title="项目地址"></a>项目地址</h1><p>项目代码和文档均以github托管，地址如下：<br><a href="https://github.com/tuzongxun/tzxblog" target="_blank" rel="noopener">https://github.com/tuzongxun/tzxblog</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://tuzongxun.gitee.io/2020/03/01/tzxblog5/" data-id="ckxn7cxjp0067kcvh0m6f4kt9" class="article-share-link">分享</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tzxblog/tags/tzxblog/" rel="tag">tzxblog</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tzxblog/tags/%E4%B8%9A%E4%BD%99%E9%A1%B9%E7%9B%AE/" rel="tag">业余项目</a></li></ul>

    </footer>
  </div>
  
    
  <div class="comments" id="comments">
    
     
       
       
      
      
	 
  </div>
 
    
 
<script src="/tzxblog/jquery/jquery.min.js"></script>

  <div id="random_posts">
    <h2>推荐文章</h2>
    <div class="random_posts_ul">
      <script>
          var random_count =5
          var site = {BASE_URI:'/tzxblog/'};
          function load_random_posts(obj) {
              var arr=site.posts;
              if (!obj) return;
              // var count = $(obj).attr('data-count') || 6;
              for (var i, tmp, n = arr.length; n; i = Math.floor(Math.random() * n), tmp = arr[--n], arr[n] = arr[i], arr[i] = tmp);
              arr = arr.slice(0, random_count);
              var html = '<ul>';
            
              for(var j=0;j<arr.length;j++){
                var item=arr[j];
                html += '<li><strong>' + 
                item.date + ':&nbsp;&nbsp;<a href="' + (site.BASE_URI+item.uri) + '">' + 
                (item.title || item.uri) + '</a></strong>';
                if(item.excerpt){
                  html +='<div class="post-excerpt">'+item.excerpt+'</div>';
                }
                html +='</li>';
                
              }
              $(obj).html(html + '</ul>');
          }
          $('.random_posts_ul').each(function () {
              var c = this;
              if (!site.posts || !site.posts.length){
                  $.getJSON(site.BASE_URI + 'js/posts.js',function(json){site.posts = json;load_random_posts(c)});
              } 
               else{
                load_random_posts(c);
              }
          });
      </script>
    </div>
  </div>

	
<nav id="article-nav">
  
    <a href="/tzxblog/2020/03/05/tzxblog6/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">上一篇</strong>
      <div class="article-nav-title">
        
          前后台打通之springboot后台要点记录
        
      </div>
    </a>
  
  
    <a href="/tzxblog/2020/02/02/tzxblog4/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">下一篇</strong>
      <div class="article-nav-title">tzxblog博客系统-接口文档</div>
    </a>
  
</nav>

  
</article>

</section>
           
    <aside id="sidebar">
  
    <!--微信公众号二维码-->


  
    

  
    
  
    
    <div class="widget-wrap">
    
      <div class="widget" id="toc-widget-fixed">
      
        <strong class="toc-title">文章目录</strong>
        <div class="toc-widget-list">
              <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#项目地址"><span class="toc-number">1.</span> <span class="toc-text">项目地址</span></a></li></ol>
          </div>
      </div>
    </div>

  
    

  
    
  
    
  
    

  
</aside>

      </div>
      <footer id="footer">
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  
  <div class="outer">
    <div id="footer-left">
      &copy; 2016 - 2021 涂宗勋&nbsp; <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank" rel="noopener">鄂ICP备20000142号</a> |&nbsp;&nbsp;
      主题 <a href="https://github.com/giscafer/hexo-theme-cafe/" target="_blank">Cafe</a>&nbsp;|&nbsp;&nbsp;
	  <span id="busuanzi_container_site_uv">本站有效访客数<span id="busuanzi_value_site_uv"></span>人</span>
	  <span id="busuanzi_container_site_pv" >| 总访问量 <span id="busuanzi_value_site_pv"></span> 次 </span>
	  <div style="width:300px;margin:0 auto; padding:20px 0;"><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42010302002171"style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="http://www.tzxcode.cn/wp-content/uploads/2020/01/备案图标.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">鄂公网安备 42010302002171号</p></a>
		 	</div>
    </div>
     <div id="footer-right">
      联系方式&nbsp;|&nbsp;1160569243@qq.com
    </div>
	
  </div>
</footer>
 
<script src="/tzxblog/jquery/jquery.min.js"></script>

 <script>
$(document).ready(function() {

    var int = setInterval(fixCount, 50);  // 50ms周期检测函数
    var countOffset = 20000;  // 初始化首次数据

    function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
});
</script> 
    </div>
    <nav id="mobile-nav">
  
    <a href="/tzxblog/" class="mobile-nav-link">首页</a>
  
    <a href="/tzxblog/shuoshuo/" class="mobile-nav-link">说说</a>
  
    <a href="/tzxblog/archives/" class="mobile-nav-link">归档</a>
  
    <a href="/tzxblog/collections/" class="mobile-nav-link">导航</a>
  
    <a href="/tzxblog/download/" class="mobile-nav-link">资源</a>
  
    <a href="/tzxblog/about/" class="mobile-nav-link">简历</a>
  
</nav>
    <img class="back-to-top-btn" src="/images/fly-to-top.png"/>
<script>
// Elevator script included on the page, already.
window.onload = function() {
  var elevator = new Elevator({
    selector:'.back-to-top-btn',
    element: document.querySelector('.back-to-top-btn'),
    duration: 1000 // milliseconds
  });
}
</script>
      

  

  







<!-- author:forvoid begin -->
<!-- author:forvoid begin -->

<!-- author:forvoid end -->

<!-- author:forvoid end -->



 
<script src="/tzxblog/js/is.js"></script>



  
<link rel="stylesheet" href="/tzxblog/fancybox/jquery.fancybox.css">

  
<script src="/tzxblog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/tzxblog/js/script.js"></script>


<script src="/tzxblog/js/elevator.js"></script>

  </div>
</body>
</html>